<template name="carItem">
	<view :style="$s.view_color">
		<block>
		    <view class="car-list-item">
		        <view class="thumb"  @click="infoShow">
		            <image class="img" mode="aspectFill" :src="carInfo.thumb" :lazy-load="true"></image>
		            <view class="tag-yanxuan">
		                <text class="thumb-tag" :style="anonymousState__temp"></text>
		            </view>
					<text class="yichuzhu" v-if="carInfo.is_rent==1">已出租</text>
		            <!-- <text class="day-mileage">图片标语</text> -->
		        </view>
		        <view class="car-info" @click="select">
					<view class="title">
						<view class="subtitle">
							<text class="text">{{carInfo.name}}</text>
							<text class="gb-type" v-if="carInfo.car_info.gearbox=='手动挡'">手</text>
							<text class="gb-type" v-if="carInfo.car_info.gearbox=='自动挡'">自</text>
						</view>
						<view class="price">
						    <text class="rmb">￥</text>
						    <text class="amount">{{carInfo.price}}</text>
						    <text class="day">/天</text>
						</view>
					</view>
					<view class="summary">
						<view>
							<block v-if="carInfo.car_info.year!=''">
								<text class="item" >{{carInfo.car_info.year}}年</text>
								<view class="viewider"></view>
							</block>
							<block v-if="carInfo.car_info.car_level!=''">
								<text class="item" >{{carInfo.car_info.car_level}}</text>
								<view class="viewider"></view>
							</block>
							<block v-if="carInfo.car_info.seat!=''">
								<text class="item" >{{carInfo.car_info.seat}}</text>
								<view class="viewider"></view>
							</block>
							<block v-if="carInfo.car_info.door!=''">
								<text class="item" >{{carInfo.car_info.door}}</text>
								<view class="viewider"></view>
							</block>
						</view>
<!-- 						<view class="price">
						    <text class="discount">原价 ￥100/天</text>
						</view> -->
					</view>
		            <view class="service-tag">
		                <block>
							<block v-for="(tag,index) in carInfo.service_tag" :key="index">
								<text class="item" :style="{'border-color':tag.color,'color':tag.color}">{{tag.name}}</text>
							</block>
		                </block>
		            </view>
<!-- 		            <view class="price">
		                <text class="rmb">￥</text>
		                <text class="amount">dayPrice</text>
		                <text class="day">/天</text>
		                <text class="discount">市场价 ￥guideDayPrice/天</text>
		            </view> -->
		        </view>
		    </view>
			
			<car-comment :textdata="carInfo"></car-comment>
			
			<car-day-price v-if="carInfo.day_price.length>0" :list="carInfo.day_price"></car-day-price>
			
			<view class="list-gap" else></view>
			
		</block>
		
	</view>
</template>

<script>
	export default {
		props: {
			carInfo: {
				type: [Object, Array],
				default: {}
			},
		},
		data() {
			return {
				carShow:false,
				content:'',
			};
		},
		watch: {
		},
		computed: {
		},
		methods: {
			select(){
				if(this.carInfo.is_rent===1){
					this.$c.info('该车已出租，请选择其他车辆')
				}else{
					this.$emit('select',this.carInfo)
				}
			},
			infoShow(){
				this.$emit('showCarContent',this.carInfo.id)
			},
		}
	};
</script>

<style lang="scss">
	.car-list-item {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: stretch;
	    align-items: stretch;
	    margin-bottom: 0rpx;
	    background: #fff;
	}
	
	.car-list-item:active {
	    opacity: .7;
	}
	
	.car-list-item .thumb {
	    position: relative;
	    width: 180rpx;
	    height: 150rpx;
	    margin-right: 20rpx;
	    overflow: hidden;
	    background: #f0f0f0;
	    background-size: 50rpx;
	    border-radius: 10rpx;
	}
	
	.car-list-item .thumb .img {
	    position: absolute;
	    top: 0;
	    left: 0;
	    display: block;
	    width: 100%;
	    height: 100%;
	    object-fit: cover;
	    background-size: cover;
	    border-radius: 10rpx;
	}
	
	.car-list-item .thumb .tag-yanxuan {
	    position: absolute;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    left: 0;
	    border: solid 2rpx #E6E8EB;
	    border-radius: 10rpx;
	}
	
	.car-list-item .thumb .tag-yanxuan .thumb-tag {
	    position: absolute;
	    top: -6rpx;
	    left: -6rpx;
	    z-index: 9;
	    display: block;
	    background-size: cover!important;
	}
	
	.car-list-item .thumb .day-mileage {
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    display: block;
	    height: 34rpx;
	    padding: 0 10rpx;
	    color: #fff;
	    font-size: 18rpx;
	    line-height: 34rpx;
	    background: -webkit-linear-gradient(left,rgba(0,0,0,.5),transparent);
	    border-radius: 0 0 0 5rpx;
	}
	
	.car-list-item .thumb .yichuzhu{
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		height: 38rpx;
		padding: 2rpx 10rpx;
		color: #FFF;
		font-size: 20rpx;
		line-height: 32rpx;
		background-color: #CC0000;
		border-radius:10rpx;
	}
	
	.car-list-item .car-info {
	    display: -ms-flexbox;
	    display: flex;
	    flex: 1;
	    flex-direction: column;
	    width: 100%;
	    min-height: 130rpx;
	    overflow: hidden;
	}
	
	.car-list-item .car-info .title {
	    height: 68rpx;
	    margin-bottom: 4rpx;
	    overflow: hidden;
	    color: #333;
	    font-weight: 700;
	    font-size: 28rpx;
		justify-content: space-between;
	    vertical-align: middle;
	}
	
	.car-list-item .car-info .title .subtitle{
		display: -ms-flexbox;
		display: flex;
		width: 280rpx;
		-ms-flex-align: center;
		align-items: center;
	}
	
	.car-list-item .car-info .title .subtitle .text {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2; /* 限制在两行 */
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 34rpx; /* 根据需要调整行高 */
		max-height: 68rpx; /* 这是两行的最大高度，基于line-height的22rpx */
	}

	.car-list-item .car-info .summary,.car-list-item .car-info .title,.car-list-item .car-info .title .gb-type {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	}
	
	.car-list-item .car-info .title .subtitle .gb-type {
	    -ms-flex-pack: center;
	    justify-content: center;
	    width: 32rpx;
	    height: 32rpx;
	    margin-left: 12rpx;
	    color: rgba(60,60,90,.6);
	    font-size: 20rpx;
	    border: 1px solid rgba(60,60,90,.3);
	    border-radius: 8rpx;
	}
	
	.car-list-item .car-info .summary {
	    height: 36rpx;
	    margin-bottom: 6rpx;
	    overflow: hidden;
		justify-content: space-between;
	}
	
	.car-list-item .car-info .summary .item {
	    float: left;
	    color: rgba(60,60,90,.6);
	    font-size: 18rpx;
	    line-height: 22rpx;
	}
	
	.car-list-item .car-info .summary .viewider {
	    float: left;
	    width: 1px;
	    height: 20rpx;
	    margin: 0 10rpx;
	    background-color: #f5f5f5;
	}
	
	.car-list-item .car-info .service-tag {
	    overflow: hidden;
	}
	
	.car-list-item .car-info .service-tag .img {
	    display: block;
	    float: left;
	    margin: 0 12rpx 12rpx 0;
	}
	
	.car-list-item .car-info .service-tag .item {
	    display: block;
	    float: left;
	    margin: 0 8rpx 8rpx 0;
	    padding: 5rpx 6rpx;
	    font-size: 18rpx;
	    line-height: 1;
	    white-space: nowrap;

	    border-radius: 3rpx;
		color: rgba(60,60,90,.8);
		background-color: #FFFFFF;
		border: solid 1px rgba(60,60,90,.3);
	}
	
	.car-list-item .car-info .service-tag .green {
		color: #00b682;
		background-color: #edfcf8;
		border: 1px solid #00b682;
	}
	
	.car-list-item .car-info .service-tag .green2 {
		color: #00b682;
		background-color: #edfcf8;
		border: 1px solid #edfcf8;
	}
	
	.car-list-item .car-info .service-tag .yellow {
		color: #dca42a;
		background-color: #FFFFFF;
		border: 1px solid rgba(220,164,42,.5);
	}
	
	.car-list-item .car-info .tag,.car-list-item .car-info .tag .item {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	}
	
	.car-list-item .car-info .price {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: baseline;
	    align-items: baseline;
	    color: $price-color;
	}
	
	.car-list-item .car-info .price .rmb {
	    display: block;
	    font-size: 20rpx;
	}
	
	.car-list-item .car-info .price .amount {
	    display: block;
	    font-weight: 700;
	    font-size: 26rpx;
	}
	
	.car-list-item .car-info .price .day {
	    display: block;
	    color: $price-color;
	    font-size: 20rpx;
	}
	
	.car-list-item .car-info .price .discount {
	    margin-left: 18rpx;
	    color: rgba(60,60,90,.3);
	    font-size: 18rpx;
	    text-decoration: line-through;
	}
	
	.list-gap{
		height: 20rpx;
	}
</style>
